Table of Contents

• 必要條件
• 安裝React
  1. 官方建議安裝方式(npx)
  2. 個人使用安裝方式(yarn)
  3. TypeScript 專案
• 啟動React app
• Linter & Formatter 安裝設定
  • 1. 自行安裝
    • Eslint
    • Prettier
  • 1. 直接安裝開源設定
    • eslint-config-ts-prefixer
  • 自動化規範排版與格式 Husky & lint-staged
• Component library
• 補充說明
  • Warning & error message
• Reference

必要條件

1. npm - 安裝方式
2. node.js - 安裝方式
3. yarn (如果是用npx安裝的話就非必要) - 安裝方式

安裝React

1. 請先確認上述條件滿足

1. 官方建議安裝方式(npx)

• REF

執行 $ npx create-react-app my-app-name,
即可成功建立一個專案名為 my-app-name 的 React專案。 (資料夾名稱為 my-app-name)

2. 個人使用安裝方式(yarn)

註: 因為習慣使用 yarn 來管理 package 所以我個人是使用這種方式
執行 $ yarn create react-app my-app-name,
即可成功建立一個專案名為 my-app-name 的 React專案。 (資料夾名稱為 my-app-name)

TypeScript 專案 (非必要)

• REF

以上方式中command後綴加入 --template typescript 即可。

啟動React app

視安裝方式使用 $ yarn start 或是 $ npm start 即會顯示React example 畫面。
預設port為3000, 網址為 http://localhost:3000。

Linter & Formatter 安裝設定 (非必要)

分為兩種方式: 1. 自行安裝 / 2. 直接裝開源設定

1. 自行安裝

Eslint (Linter)

• 在專案中加入 eslint 套件 - $ yarn add eslint -D
• 初始化 eslint - $ eslint --init
• 回答完問題之後就會自動幫你安裝

Prettier (Formatter)

• 在專案中加入 prettier 套件 - $ yarn add prettier -D -E
• 新增 .prettierrc.json 檔案 - $ echo {}> .prettierrc.json
  我的 .prettierrc.json 參考:

  {
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "trailingComma": "all"
  }
  

• 若同時裝有 eslint & prettier , 則依官網建議一併安裝 eslint-config-prettier 以避免衝突- $ yarn add eslint-config-prettier -D
• 安裝 eslint-plugin-prettier - $ yarn add eslint-plugin-prettier -D

2. 直接安裝開源設定

直接用開源的套件 eslint-config-ts-prefixer

eslint-config-ts-prefixer

• 安裝套件 - $ yarn add -D eslint-config-ts-prefixer eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript eslint-config-prettier eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-prettier eslint-plugin-sort-keys-fix prettier
• 建立設定檔 - $ npx eslint-config-ts-prefixer config
• 新增 .prettierrc 檔案 - $ echo {"singleQuote": true,"semi": false}> .prettierrc.json
• 在 package.json 的 script 中 加入代碼 "lint:fix": "eslint src --ext .ts,.tsx,.js,jsx --fix"

自動化規範排版與格式 Husky & lint-staged (Git hooks)

有做此步驟的話, 每次 commit 時 husky 都會自動幫你使用 eslint & prettier 格式化本次commit的檔案

• 在專案中加入 husky 套件 - $ yarn add husky -D
• 在 package.json 的 script 中 加入代碼 "postinstall": "husky install"
• 啟用 husky git hooks - $ yarn postinstall
• $ npx husky add .husky/pre-commit "npx lint-staged"
• 在專案中加入 lint-staged 套件 - $ yarn add lint-staged -D
• 將以下代碼插入package.json的任意處

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.+(ts|tsx|js|jsx)": [
      "eslint --ext .ts,.tsx,.js,jsx --fix",
      "git add"
    ],
    "*": [
      "prettier --write",
      "git add"
    ]
  }
  

• 如果有要寫測試記得將 .husky/pre-commit 裡面的 npm test 改為 npm test -- --watchAll=false 不然 create-react-app 預設是執行 watch mode (這裡是參考 RexHung大大的文章)

Component library

因為是以快速為主, 就使用現成的component library減少自己刻的時間,
這裡使用 Material UI
安裝方式

# Via npm
$ npm install @mui/material @emotion/react @emotion/styled

# Via yarn
$ yarn add @mui/material @emotion/react @emotion/styled

補充說明

Warning & error message

安裝完可能會有一些warning或是error message,
目前我有碰到過並可以解釋的部分是:

1. 安裝完成但訊息中有Error並提到 Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"

   • 可能原因: 可能是因為沒有設定 git global config 導致 初始化 git 失敗
   • 解決方式:

     $ git config --global user.name "YOUR USER NAME"
     $ git config --global user.email "YOUR USER EMAIL"
     

     後再重新creaet react。
     或是已create react的話 一樣輸入USER NAME & EMAIL 後 $ git init

2. 安裝完後出現如下類似警告訊息

    npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
    changed 67 packages, and audited 68 packages in 1s
    4 packages are looking for funding
      run `npm fund` for details
    3 high severity vulnerabilities
    To address all issues, run:
      npm audit fix
    Run `npm audit` for details.
   

   • 可能原因: npm audit警告專案可能存在資安漏洞
   • 解決方式: 不用理他即可, 有興趣的話原因可以參考這位大大寫的文章 REF

Reference

1. 官方建議安裝方式(npx): https://react.dev/learn/start-a-new-react-project
2. TypeScript 專案: https://legacy.reactjs.org/docs/static-type-checking.html#typescript
3. Warning & error message: https://overreacted.io/npm-audit-broken-by-design/